<template>
  <div style="background-color: white">
    <IntroPic :picture="pic" title="我 的 订 单"></IntroPic>

    <div style="margin-left: 10%;margin-right: 10%;margin-top: 30px;">
      <el-row style="font-size: 18px;font-weight: bold;color: #797979">
        <el-col :span="12">产品</el-col>
        <el-col :span="3">价格</el-col>
        <el-col :span="3">数量</el-col>
        <el-col :span="3">小记</el-col>
        <el-col :span="3">状态</el-col>
      </el-row>
      <div v-for="item in orderList">
        <router-link :to="{path:'/orderDetail',query:{id:item.orderId}}">
          <OrderCart :my-data="item" style="margin-top: 10px;"></OrderCart>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script setup>
import IntroPic from "../Slither/IntroPic.vue";

import OrderCart from "../Slither/OrderCart.vue";
import {ref} from "vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";

let pic = ref('')
const getPic = ()=>{
  axios.get('/pic/shopCart').then(res => {
    //console.log(res.data.data);
    pic.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getPic();

let orderList = ref([])
const getOrderList = ()=>{
  axios.get("/order/all").then((res)=>{
    //console.log(res.data.data);
    orderList.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getOrderList();


</script>

<style scoped>
a{
  text-decoration: none;
}
</style>
